import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import api from 'api';
import Income from './components/income';
import Expend from './components/expend';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      cueNow: 1,
      pageSize: 15,
      pageNum: 0,
      totalPages: 0,
      refresherTriggered: false,
      dataList: []
    };
  }

  componentDidMount() { }

  componentDidShow() {
    this.getList();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  async getList() {
    let { pageSize, pageNum, cueNow } = this.state;
    let params = {
      pageNum,
      pageSize,
      type: cueNow,
    }
    let result = await api.pointsMallController.getUserusePointInfo(params);
    if (result.code === 'K-000000' && result.context.customerPointsDetailVOPage.content.length > 0) {
      let list = JSON.parse(JSON.stringify(this.state.dataList));
      if (pageNum == 0) {
        this.setState({
          dataList: result.context.customerPointsDetailVOPage.content,
          totalPages: result.context.customerPointsDetailVOPage.totalPages
        })
      } else {
        let newList = list.concat(
          result.context.customerPointsDetailVOPage.content,
        );
        this.setState({
          dataList: newList,
          totalPages: result.context.customerPointsDetailVOPage.totalPages
        })
      }
    }
  }

  _onScrollToLower = () => {
    let { totalPages, pageNum } = this.state;
    let num = pageNum + 1;
    if (num == totalPages) return;
    this.setState({ pageNum: num },
      () => {
        this.getList()
      }
    )

  };

  _onRefresherRefresh = () => {
    const { refresherTriggered } = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    this.setState({ pageNum: 0, dataList: [] },
      () => {
        this.getList()
      }
    )
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  render() {
    let { cueNow, refresherTriggered, dataList, totalPages, pageNum } = this.state;
    return (
      <View className="packageCPointsRecord">
        <View className="barBox">
          <View
            className="t_view"
            onClick={() => {
              this.setState({ cueNow: 1, pageNum: 0, dataList: [] },
                () => {
                  this.getList();
                })
            }}
          >
            <Text
              className={cueNow == 1 ? 't_a_test' : 't_text'}>
              积分收入
            </Text>
            <View className={cueNow == 1 ? 't_a_border' : 't_border'}></View>
          </View>
          <View
            className="t_view"
            onClick={() => {
              this.setState({ cueNow: 0, pageNum: 0, dataList: [] },
                () => {
                  this.getList();
                })
            }}>
            <Text
              className={cueNow == 0 ? 't_a_test' : 't_text'}>
              积分支出
            </Text>
            <View className={cueNow == 0 ? 't_a_border' : 't_border'}></View>
          </View>
        </View>
        <ScrollView
          className="scrollView"
          scrollY
          onScrollToLower={this._onScrollToLower}
          refresherEnabled={true}
          refresherTriggered={refresherTriggered}
          onRefresherPulling={this._onRefresherRefresh}>
          {cueNow === 1 ?
            <Income dataList={dataList} totalPages={totalPages} pageNum={pageNum} /> :
            <Expend dataList={dataList} totalPages={totalPages} pageNum={pageNum} />
          }
        </ScrollView>
      </View>
    );
  }
}
